<template>
  <el-container>
    <el-aside :width="menuCollapse?'auto':'200px'" style="float:left;padding-right: 10px;position: relative;">
      <div class="el-aside-collapse" :class="{spread:menuCollapse}" @click="menuCollapseEvt"></div>
      <el-menu :default-active="this.$route.path" unique-opened style="height:100%;overflow:auto;border-radius: 4px;" :collapse="menuCollapse" :router="true">
        <el-menu-item index="/photograph/works">
          <i class="el-icon-picture-outline"></i>
          <span slot="title">作品展</span>
        </el-menu-item>
        <el-menu-item index="/photograph/myVotes">
          <i class="el-icon-tickets"></i>
          <span slot="title">我的投票</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main class="el-main-style" style="overflow-x: hidden;">
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<style>
</style>
<script>
  import {
    Menu,
    MenuItem,
    Submenu,
    Breadcrumb,
    BreadcrumbItem,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    MessageBox
  } from 'element-ui';
  export default {
    components: {
      'el-menu': Menu,
      'el-menu-item': MenuItem,
      'el-submenu': Submenu,
      'el-breadcrumb': Breadcrumb,
      'el-breadcrumb-item': BreadcrumbItem,
      'el-dropdown': Dropdown,
      'el-dropdown-menu': DropdownMenu,
      'el-dropdown-item': DropdownItem
    },
    data() {
      return {
        menuCollapse: false
      };
    },
    methods: {
      logout: function() {
        var _this = this;
        MessageBox.confirm('确认退出吗?', '提示', {})
          .then(() => {
            _this.axios
              .post(
                '/logout', {}, {
                  baseURL: '/aggregation'
                }
              )
              .then(res => {
                _this.$router.push('/login');
              });
          })
          .catch(() => {});
      },
      /* 折叠事件*/
      menuCollapseEvt() {
        this.menuCollapse = !this.menuCollapse;
      }
    },
    beforeCreate() {
    }
  };
</script>
